import React, { Component } from 'react';
//import logo from './logo.svg';
import {connect} from 'react-redux';
import Temp from './temp';
import Items from '../components/Item';
import '../App.css';
import {mapState,mapDispatch} from '../store/map'
class Detail extends Component {
  constructor(props){
    super(props);
    this.state={
      list:['hell','jack','lel'],
      val:'',
      show:true,
      bg:'red',
      text:'hello'
    }
    this.pushItem = this.pushItem.bind(this)
    this.getVal = this.getVal.bind(this)
    //this.delItem = this.delItem.bind(this)
    this.tab = this.tab.bind(this)
  }
  pushItem(){
    this.setState({
      list:[...this.state.list,this.state.val]
    })
  }
  getVal(e){
    this.setState({
      val:e.target.value
    })
  }
  delItem(index,e){
    console.log(e.target)
    const list=[...this.state.list]
    list.splice(index,1);
    this.setState({
      list
    })
  }
  initItem(){
    return  this.state.list.map((item,index)=>{
        return <Items delItem={this.delItem.bind(this,index)} key={index} item={item} index={index}/>
      })
  }
  tab(){
    //console.log(this.refs.dora)获取真实dom节点
    this.setState(state=>({
      show:!state.show
    }))
  }
  setHandler(age){
    this.props.addName('lee');
    this.props.addAge(age)
  }
  render() {
    return (
      <div className="App">
        <Temp title="详情" back={this.props.history} isNav>
        <hr/>
        <button onClick={this.tab}>{this.state.show ? 'on' :'off'}</button>
        <button onClick={this.setHandler.bind(this,15)}>Dset</button>
        <p>{this.props.user.name}</p>
        <p>{this.props.user.age}</p>
        <br/>
        <img src="./img/psb.jpg" ref="dora" alt="doraemon"/>
        <input type="text" value={this.state.val} onChange={this.getVal}/>
        <button className="btn" style={{background:this.state.bg,color:'blue'}} onClick={this.pushItem}>push</button>
        { this.initItem() }
        </Temp>
      </div>
    );
  }
}
/*<header className="App-header">
  <img src={logo} className="App-logo" alt="logo" />
  <p>
    Edit <code>src/App.js</code> and save to reload.
  </p>
  <a
    className="App-link"
    href="https://reactjs.org"
    target="_blank"
    rel="noopener noreferrer"
  >
    Learn React
  </a>
</header>*/
export default connect(mapState,mapDispatch)(Detail);
